<script setup lang="ts">
import { ElCol } from 'element-plus';
import { ProxyConfigViewModel } from '../../services/client'
import { computed } from 'vue';

const { data } = defineProps({ data: ProxyConfigViewModel })

const replacer = (_: any, value: any) => {
    
    if(value === undefined || value === null){
        return undefined;
    }

    return value;
}

const prettyRoutesJsonText = computed(() => {
    return JSON.stringify(JSON.parse(data?.routesJsonText ?? '[]'), replacer, 4);
})

const prettyClustersJsonText = computed(() => {
    return JSON.stringify(JSON.parse(data?.clustersJsonText ?? '[]'), replacer, 4);
})

</script>

<template>
    <ElRow>
        <ElCol>
            <span>Revision Id:</span>
            <span>{{ data!.revisionId }}</span>
        </ElCol>
    </ElRow>
    <ElRow>
        <ElCol>
            <span>Routes</span>
            <pre>{{ prettyRoutesJsonText }}</pre>
        </ElCol>
        <ElCol>
            <span>Clusters</span>
            <pre>{{ prettyClustersJsonText }}</pre>
        </ElCol>
    </ElRow>
</template>

<style scoped>
pre {
    white-space: pre;
    font-family: 'Courier New', Courier, monospace;
}
</style>